<template>
    <div class="access-history">
        <Tabs type="card" class="tab">
            <TabPane label="业主出行">
                <div class="search-nav">
                    <span>小区名称：</span>
                    <Input v-model="villageName" placeholder="" class="input-long"/>
                    <span>姓名：</span>
                    <Input v-model="userName" placeholder="" class="input-short"/>
                    <span>业主电话：</span>
                    <Input v-model="userPhone" placeholder="" class="input-short"/>
                    <span>时间段：</span>
                    <DatePicker v-model="datetimerange" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间段" class="input-long"></DatePicker>
                    <Button type="primary" @click="getTravelRecordData(villageName,userName,userPhone,datetimerange)">查询</Button>
                </div>
                <Table class="main-table" border height="184" :columns="ownerhistoryColumns" :data="ownerCurrnhistoryData">
                    <template slot-scope="{ row, index }" slot="state">
                        <span>{{row.state=='in'?'入':'出'}}</span>
                    </template>
                </Table>
                <Page :total="ownerhistoryData.length" @on-change="changePage" :page-size="3" show-total class="text-center"/>
            </TabPane>
            <TabPane label="拜访历史">
                <div class="search-nav">
                    <span>小区名称：</span>
                    <Input v-model="villageName2" placeholder="" class="input-long"/>
                    <span>访客姓名：</span>
                    <Input v-model="visitorName" placeholder="" class="input-short"/>
                    <span>访客电话：</span>
                    <Input v-model="visitorPhone" placeholder="" class="input-short"/>
                    <span>业主姓名：</span>
                    <Input v-model="ownerName" placeholder="" class="input-short"/>
                    <span>时间段：</span>
                    <DatePicker v-model="datetimerange2" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间段" class="input-long"></DatePicker>
                    <Button type="primary" @click="getVisitRecordData(villageName2,visitorName,ownerName,visitorPhone,datetimerange2)">查询</Button>
                </div>
                <Table class="main-table" border height="184" :columns="ownerhistoryColumns2" :data="ownerCurrnhistoryData2">
                    <template slot-scope="{ row, index }" slot="state">
                        <span>{{row.state=='in'?'入':'出'}}</span>
                    </template>
                </Table>
                <Page :total="ownerhistoryData2.length" @on-change="changePage2" :page-size="3" show-total class="text-center"/>
            </TabPane>
        </Tabs>
        <!--<div class="main-tile">出入历史</div>-->
        <!--<div class="search-nav">-->
            <!--<span>小区名称：</span>-->
            <!--<Input v-model="villageName" placeholder="" class="input-long"/>-->
            <!--<span>业主姓名：</span>-->
            <!--<Input v-model="userName" placeholder="" class="input-short"/>-->
            <!--<span>访客姓名：</span>-->
            <!--<Input v-model="userName" placeholder="" class="input-short"/>-->
            <!--<Button type="primary" @click="getTravelRecordData(villageName,userName)">查询</Button>-->
        <!--</div>-->
        <!--<Table class="main-table" border height="184" :columns="ownerhistoryColumns" :data="ownerhistoryData">-->
            <!--<template slot-scope="{ row, index }" slot="state">-->
                <!--<span>{{row.state=='in'?'入':'出'}}</span>-->
            <!--</template>-->
        <!--</Table>-->
        <!--<Page :total="ownerhistoryData.length" @on-change="changePage" :page-size="3" show-total class="text-center"/>-->
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
        data() {
            return {
                villageName:'',
                villageName2:'',
                userName:'',
                userPhone:'',
                visitorName:'',
                visitorPhone:'',
                ownerName:'',
                datetimerange:'',
                datetimerange2:'',
                ownerhistoryColumns:[
                    {
                        title: '小区名称',
                        key: 'name',
                        align: 'center',
                    },
                    {
                        title: '小区地址',
                        key: 'address',
                        align: 'center',
                    },
                    {
                        title: '业主名称',
                        key: 'ownerName',
                        align: 'center',
                    },
                    {
                        title: '业主电话',
                        key: 'ownerPhone',
                        align: 'center',
                    },
                    {
                        title: '业主地址',
                        key: 'domicile',
                        align: 'center',
                    },
                    {
                        title: '出/入',
                        slot: 'state',
                        align: 'center',
                    },
                    {
                        title: '出行时间',
                        key: 'recordTime',
                        align: 'center',
                    },
                    {
                        title: '体温',
                        key: 'temperature',
                        align: 'center',
                    },
                ],
                ownerhistoryData:[],
                ownerCurrnhistoryData:[],
                ownerhistoryColumns2:[
                    {
                        title: '小区名称',
                        key: 'name',
                        align: 'center',
                    },
                    {
                        title: '小区地址',
                        key: 'address',
                        align: 'center',
                    },
                    {
                        title: '访客名称',
                        key: 'visitorsName',
                        align: 'center',
                    },
                    {
                        title: '访客电话',
                        key: 'visitorsPhone',
                        align: 'center',
                    },
                    {
                        title: '业主名称',
                        key: 'ownerName',
                        align: 'center',
                    },
                    {
                        title: '业主地址',
                        key: 'domicile',
                        align: 'center',
                    },
                    {
                        title: '出/入',
                        slot: 'state',
                        align: 'center',
                    },
                    {
                        title: '出行时间',
                        key: 'recordTime',
                        align: 'center',
                    },
                    {
                        title: '体温',
                        key: 'temperature',
                        align: 'center',
                    },
                ],
                ownerhistoryData2:[],
                ownerCurrnhistoryData2:[],
            }
        },
        mounted(){
//            this.getTravelRecordData('','','');
//            this.getVisitRecordData('','','');
        },
        methods: {
//            changeDatetimerange(time){
//                this.datetimerange=time
//            },
            //获取业主出行数据
            getTravelRecordData(villageName,ownerName,ownerPhone,timeRange){
                let params={
                    "name": villageName,//小区名字
                    "ownerName":ownerName,//业主名字,
                    "phoneNumber":ownerPhone,
                    "startTime":this.$utils.getDateTime(timeRange[0]),
                    "endTime":this.$utils.getDateTime(timeRange[1])
                }
                this.$axios.post(this.$api.queryTravelRecord,params)
                    .then(success=>{
                        this.ownerhistoryData=success.data.data
                        this.changePage(1)
                    })
                    .catch(error=>{
                        console.log(error.data)
                    })
            },
            //获取拜访历史数据
            getVisitRecordData(villageName,visitorsName,ownerName,phoneNumber,timeRange){
                let params={
                    "name": villageName,//小区名字
                    "visitorsName": visitorsName,//访客名字,
                    "ownerName":ownerName,//业主名字,
                    "phoneNumber":phoneNumber,
                    "startTime":this.$utils.getDateTime(timeRange[0]),
                    "endTime":this.$utils.getDateTime(timeRange[1])
                }
                this.$axios.post(this.$api.queryVisitRecord,params)
                    .then(success=>{
                        this.ownerhistoryData2=success.data.data
                        this.changePage2(1)
                    })
                    .catch(error=>{
                        console.log(error.data)
                    })
            },
            //改变页数(业主出行)
            changePage(num){
                this.ownerCurrnhistoryData=this.$utils.sliceArray(this.ownerhistoryData,3)[num-1]
            },
            //改变页数(拜访历史)
            changePage2(num){
                this.ownerCurrnhistoryData2=this.$utils.sliceArray(this.ownerhistoryData2,3)[num-1]
            },
        }
    }
</script>
<style scoped lang="scss">
    .access-history,.tab{
        height: 100%;
    }
    .input-short{
        width: 100px;
    }
    .input-long{
        width: 200px;
    }
    .search-nav{
        padding: 10px 0;
        border-top: 1px solid #dcdee2;
    }
    .main-table{
        margin-bottom: 10px;
    }
</style>